<!DOCTYPE HTML>
<html>
<meta charset="utf-8" />

<head>
    <!--后代选择器，又被称为包含选择器，后代选择器可以作为某元素的后代的元素。
        举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：-->

        <!--如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：-->
    <style>
        h1 em {
            color: red;
        }
        
        h1>strong {
            color: red;
        }
    </style>
    <style>
        .news {
            width: 1000px;
            height: 2000px;
            background-color: gray;
            border: solid 1px black;
        }
        
        .news img {
            float: right;
            border: 1px dotted black;
            margin: 0px 0px 15px 100px;
        }
        
        .news p {
            float: right;
        }
        
        .clear {
            clear: both;
        }
        
        span {
            float: left;
            width: 0.7em;
            font-size: 400%;
            font-family: algerian, courier;
            line-height: 80%;
        }
    </style>
</head>

<body>
    <div class="news">

        <p><span>S</span>ome text.sdmfekwlsdfjms,a.l;wefjkdnsvmc ,a.ml;.pghbjnkl,; jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlo jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9
            jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghv mklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmkli <img src="../resource/abc.png" />oghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9
            jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9
            jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9 jhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9
            pi9kjhgvl;,ghbjl;,pugvhkopghvmklioghvoftyghvklmopftyjghvkmlopi9u8yghvjn
        </p>
        <div class="clear"></div>
    </div>
    <h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph.</p>

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>


</html>